"use client"

import { useState } from 'react'

/**
 * checkbox peer 元素状态改变兄弟节点样式
 *  has-[:checked]: 子元素状态改变父元素样式
 * @returns {JSX.Element}
 * @constructor
 */
export default function Checkbox() {

  const [checked, setChecked] = useState(false)
  return (
    <div className="flex p-5 bg-indigo-50 w-1/2 mx-auto
                    mt-20 gap-20 items-center
                    has-[input[type='checkbox']:checked]:ring-1
                    has-[:checked]:ring-offset-4
                    has-[:checked]:ring-blue-400
                    duration-300">
      <input type="checkbox" className={"size-5 peer accent-blue-500"} onClick={() => setChecked(!checked)}/>
      <p className={"font-mono peer-checked:underline peer-checked:underline-offset-4 peer-checked:text-blue-500"}>
        千里之行始于足下 {checked ? '✅' : '❌'}
      </p>
    </div>
  );
}
